import './GetApprovalDetail.scss'
import { useMount } from 'ahooks';
import { useState } from 'react';
import { useRequest } from 'alova/client';
import { Steps } from 'antd';

import { Http } from '../../Utils/Api';


const GetApprovalDetail = ({ data }) => {
    const [Data, setData] = useState([])
    const { send } = useRequest(data => Http(data), { immediate: false })

    useMount(() => {
        send({ url: 'getApprovalDetail', params: { BusinessUuid: data.uuid } }).then(res => {
            const StateMapping = {
                '-1': { title: '已提交', status: 'process' },
                0: { title: '待审核', status: 'wait' },
                1: { title: '审核通过', status: 'finish' },
                2: { title: '审核未通过', status: 'error' },
            }
            const arr = res.data.list.map(({ uuid, approvalStatus, flowName, remark, updateTime, userName }) => ({
                title: `${flowName} ${StateMapping[approvalStatus].title}`,
                subTitle: `${userName} ${updateTime || ''}`,
                description: remark,
                status: StateMapping[approvalStatus].status
            }))
            setData(arr)
        })
    })


    return (
        <div className='GetApprovalDetail'>
            {Data &&
                <Steps
                    progressDot
                    current={Data.length}
                    direction="vertical"
                    items={Data}
                />
            }
        </div>
    );
};

export default GetApprovalDetail;